<template>
  <view class="card-box" :data-id="item.id">
    <view class="sticky">
      {{item.title}}
    </view>
    <template v-if="item.length>0">
      <view class="card-main">
		<template v-for="(item2,idx) in item">
			<view>
				<view class="image-box">
					<image src="" mode=""></image>
				</view>
				<text>小分类：{{idx}}</text>
			</view>
		</template>
      </view>
    </template>
    <!-- 无数据时   展示骨架图 -->
    <template v-else>
      <view class="card-main">
       <!-- <van-skeleton title :row="3" /> -->
      </view>
    </template>
  </view>
</template>

<script>
	
  import { mapState } from 'vuex'
  export default {
    name: 'Name',
    data() {
      return {

      }
    },
    props: {
      item: {
        type: Object,
        default () {
          return {}
        }
      },
    },
    computed: {

    },
    mounted() {
		console.log()
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .card-box {
    position: relative;

    .sticky {
      // position: sticky;
      // z-index: 9;
      // top: 0px;
      padding: 10px 0;
	  
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  font-weight: bold;
	  color: #333333;
    }

    .card-main {
      position: relative;
      z-index: 1;
	  padding: 30rpx 0;
	  
	  display: grid;
	  grid-template-columns: 1fr 1fr 1fr;
	  grid-gap: 20rpx;
      &>view {
        text-align: center;
		
		.image-box{
			width: 156rpx;
			height: 156rpx;
			background: #FAFAFA;
			border-radius: 10rpx;
			padding: 19rpx ;
			box-sizing: border-box;
			image{
				width: 100%;
				height: 100%;
			}
		}
		text{
			padding-top: 12rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
      }
    }
  }
</style>
